<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <!-- 1.9.1的JQuery文件 -->
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="../common-css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/unslider.min.js"></script>

    <style>
        .banner {
            position: relative; top:0;
            overflow: auto;
            width: 100%;


        }
        .banner li { list-style: none; }
        .banner ul li { float: left; }
        .dots{width:66px;position:absolute;bottom:10px;left:50%;margin-left:-27px;}
        .dot{
            display:inline-block;
            width: 10px;
            height: 10px;
            font-size: 0px;
            line-height: 0px;
            margin-right: 12px;
            cursor: pointer;
            background-color: #ffffff;
            border-radius: 8px;
        }
        .dot.active{background-color: #cce8cf;}

    </style>
</head>
<body>
<!-- 导航条 -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" id="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" >
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a  class="navbar-brand">
                <img class="visible-md visible-lg fo-nav-logo img-responsive img-circle"  src="img/logo.jpg">
            </a>
            <p class="navbar-text">飞海</p>
        </div><!--  /navbar-header -->

        <div class="collapse navbar-collapse" id="main-menu">
            <ul class="nav navbar-nav navbar-form navbar-right" id="nav-form">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"><span class="glyphicon glyphicon-cloud"></span>Project<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="glyphicon glyphicon-film"></span>&nbsp; Tech  </a> </li>
                        <li><a href="#"><span class="glyphicon glyphicon-film"></span>&nbsp; Idea</a></li>
                    </ul>
                </li>
                <li class="active"><a href="#"><span class="glyphicon glyphicon-asterisk"> </span>Blog</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-road"> </span>Mes</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"> </span>User</a></li>

            </ul>
        </div><!-- /collapse navbar-collapse -->
    </div><!-- /container-fluid -->
</nav>

<main class="container">
    <!--轮播组件-->
    <section>
        <div class="banner">
            <ul>
                <li><img src="img/slider-img1.jpg" class="img-responsive img-rounded" alt="banner_1"></li>
                <li><img src="img/slider-img2.jpg" class="img-responsive img-rounded" alt="banner_2"></li>
                <li><img src="img/slider-img3.jpg" class="img-responsive img-rounded"alt="banner_3"></li>
            </ul>
        </div>
    </section>
    <br>
    <!--快速入口-->
    <section>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-3 fo-item-s text-center ">
                        <a href="#">关注的项目</a>
                    </div>
                    <div class="col-lg-3 fo-item-s text-center ">
                        <a href="#">参加的SIG</a>
                    </div>
                    <div class="col-lg-3 fo-item-s text-center">
                        <a href="#">开始创作吧</a>
                    </div>
                    <div class="col-lg-3 fo-item-s text-center">
                        <a href="#">刷新一下！</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--热门活动-->
    <section>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">热门活动</h2>
            </div>

            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-4 fo-item">
                        <img src="img/default.jpg" alt="" class="img-responsive">
                        <p class="text-center">Lambda计划正是飞海（FlyingOcean）的前世与今生</p>
                    </div>
                    <div class="col-lg-4 fo-item">
                        <img src="img/default.jpg" alt="" class="img-responsive">
                        <p class="text-center">Lambda计划正是飞海（FlyingOcean）的前世与今生</p>
                    </div>
                    <div class="col-lg-4 fo-item">
                        <img src="img/default.jpg" alt="" class="img-responsive">
                        <p class="text-center">Lambda计划正是飞海（FlyingOcean的）前世与今生</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 fo-item">
                        <img src="img/default.jpg" alt="" class="img-responsive">
                        <p class="text-center">Lambda计划正是飞海（FlyingOcean）的前世与今生</p>
                    </div>
                    <div class="col-lg-4 fo-item">
                        <img src="img/default.jpg" alt="" class="img-responsive">
                        <p class="text-center">Lambda计划正是飞海（FlyingOcean）的前世与今生</p>
                    </div>
                    <div class="col-lg-4 fo-item">
                        <img src="img/default.jpg" alt="" class="img-responsive">
                        <p class="text-center">Lambda计划正是飞海（FlyingOcean)的前世与今生</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <br>
    <!--精选比赛-->
    <section>
        <section>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">精选项目</h2>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-4 fo-item">
                            <img src="img/default-project.jpg" alt="" class="img-responsive center-block">
                            <p class="text-center">Lambda计划正是飞海（FlyingOcean）的前世与今生</p>
                        </div>
                        <div class="col-lg-4 fo-item">
                            <img src="img/default-project.jpg" alt="" class="img-responsive center-block">
                            <p class="text-center">Lambda计划正是飞海（FlyingOcean）的前世与今生</p>
                        </div>
                        <div class="col-lg-4 fo-item">
                            <img src="img/default-project.jpg" alt="" class="img-responsive center-block">
                            <p class="text-center">Lambda计划正是飞海（FlyingOcean的）前世与今生</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 fo-item">
                            <img src="img/default-project.jpg" alt="" class="img-responsive center-block">
                            <p class="text-center">Lambda计划正是飞海（FlyingOcean）的前世与今生</p>
                        </div>
                        <div class="col-lg-4 fo-item">
                            <img src="img/default-project.jpg" alt="" class="img-responsive center-block">
                            <p class="text-center">Lambda计划正是飞海（FlyingOcean）的前世与今生</p>
                        </div>
                        <div class="col-lg-4 fo-item">
                            <img src="img/default-project.jpg" alt="" class="img-responsive center-block">
                            <p class="text-center">Lambda计划正是飞海（FlyingOcean)的前世与今生</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
</main>
<script>
    $(function () {
        //init unslider
        $(".banner").unslider({
            speed: 500,               //  The speed to animate each slide (in milliseconds)
            delay: 3000,              //  The delay between slide animations (in milliseconds)
            // complete: function() {},  //  A function that gets called after every slide animation
            keys: true,               //  Enable keyboard (left, right) arrow shortcuts
            dots: true,               //  Display dot navigation
            fluid: true              //  Support responsive design. May break non-responsive designs
        });


    });
</script>
</body>
</html>